<template>
  <div class="header" v-if="commentStore.currentQuestion.question_id">
    <template v-if="commentStore.similar.isShow">
      <span class="item"
        >第{{
          commentStore.similar.isShow
            ? props.currentSimilar + 1
            : commentStore.currentQuestion?.questionIndex
        }}题</span
      >
      <span class="item">相似题</span>
      <span class="item">{{
        commentStore.similar.selectedList[props.currentSimilar]?.similarFrom ||
        '难易度'
      }}</span>
      <span class="item"> {{ getType || '题目类型' }}</span>
    </template>
    <template v-else>
      <span class="item"
        >第{{ commentStore.currentQuestion?.questionIndex }}题</span
      >
      <span class="item">{{ getType || '题目类型' }}</span>
      <span class="item">{{ getDifficulty || '难易度' }}</span>
      <span class="item"
        >正确率{{ formatNum(commentStore.currentQuestion.score_rate) }}%</span
      >
    </template>
  </div>
</template>
<script setup>
import { computed } from 'vue'
import { DIFFICULTY_ENUM } from '../constant'
import { useComment } from '@/stores/comment'
import { formatNum } from '@/utils/common'
const commentStore = useComment()
const props = defineProps({
  currentSimilar: {
    default: 0,
    type: Number
  }
})
const getDifficulty = computed(() => {
  const content = commentStore.similar.isShow
    ? commentStore.similar.selectedList[props.currentSimilar]
    : commentStore.currentQuestion.question_detail
  return DIFFICULTY_ENUM[content?.difficulty] || ''
})

const getType = computed(() => {
  const content = commentStore.similar.isShow
    ? commentStore.similar.selectedList[props.currentSimilar]
    : commentStore.currentQuestion.question_detail
  return content.question_type || ''
})
</script>
<style lang="less" scoped>
.header {
  padding: 32px;
  .item {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    display: inline-flex;
    gap: 20px;

    &:not(:last-child)::after {
      content: '|';
      position: relative;
      left: -10px;
    }
  }
}
</style>
